<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>商品信息</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="内容样式" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="标题颜色:"><ColorPicker :color="data.color" :name="'title'"></ColorPicker></el-form-item>
            <el-form-item label="副标题:"><ColorPicker :color="data.color" :name="'desc'"></ColorPicker></el-form-item>
            <el-form-item label="价格颜色:"><ColorPicker :color="data.color" :name="'price'"></ColorPicker></el-form-item>
            <el-form-item label="划线价:"><ColorPicker :color="data.color" :name="'del_price'"></ColorPicker></el-form-item>

            <!--
               <ColorPicker :color='data.color' :name='"express"' ></ColorPicker>
            </el-form-item> -->
            <el-form-item label="销量:">
              <el-radio-group v-model="data.showsales">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color" v-if='data.showsales'>
                <el-form-item label="颜色:"><ColorPicker :color="data.color" :name="'sales'"></ColorPicker></el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="库存:">
              <el-radio-group v-model="data.showaddr">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color" v-if='data.showaddr'>
                <el-form-item label="颜色:"><ColorPicker :color="data.color" :name="'addr'"></ColorPicker></el-form-item>
              </div>
            </el-form-item>
            <!-- <el-form-item label="颜色:"><ColorPicker :color="data.color" :name="'addr'"></ColorPicker></el-form-item> -->
            <el-form-item label="背景颜色:"><ColorPicker :color="data.color" :name="'bg'"></ColorPicker></el-form-item>
            <el-form-item label="上间距:">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.top"></el-slider>
                <el-input-number v-model="data.padding.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距:">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.bottom"></el-slider>
                <el-input-number v-model="data.padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容" name="2">
          <el-form label-width="100px" size="medium">
            <el-form-item label="分享开关:">
              <el-radio-group v-model="data.share.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.share.icon != ''">
                        <i :class="data.share.icon + ' iconfont'"></i>
                        <i class="icon-abl-close el-icon-error" @click="removeIcon('share')"></i>
                        <span class="choose_bar" @click="chooseIcon('share')"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.share.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('share')"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="按钮文字"><el-input placeholder="留空则不显示" v-model="data.share.text"></el-input></el-form-item>
                  <el-form-item label="颜色"><ColorPicker :color="data.share" :name="'color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <el-form-item label="收藏开关:">
              <el-radio-group v-model="data.collect.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.collect.icon != ''">
                        <i :class="data.collect.icon + ' iconfont'"></i>
                        <i class="icon-abl-close el-icon-error" @click="removeIcon('collect')"></i>
                        <span class="choose_bar" @click="chooseIcon('collect')"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.collect.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('collect')"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="按钮文字"><el-input placeholder="留空则不显示" v-model="data.collect.text"></el-input></el-form-item>
                  <el-form-item label="收藏颜色"><ColorPicker :color="data.collect" :name="'color'"></ColorPicker></el-form-item>
                  <el-form-item label="未收藏颜色"><ColorPicker :color="data.collect" :name="'bfcolor'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>

            <el-form-item label="佣金开关:">
              <el-radio-group v-model="data.commission.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="显示文字"><el-input placeholder="显示文字" v-model="data.commission.text"></el-input></el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <el-form-item label="会员价开关">
              <el-radio-group v-model="data.memberprice.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="显示文字"><el-input placeholder="显示文字" v-model="data.memberprice.text"></el-input></el-form-item>
                  <el-form-item label="背景颜色"><ColorPicker :color="data.memberprice" :name="'bg_color'"></ColorPicker></el-form-item>
                  <el-form-item label="文字颜色"><ColorPicker :color="data.memberprice" :name="'text_color'"></ColorPicker></el-form-item>
                  <el-form-item label="价格颜色"><ColorPicker :color="data.memberprice" :name="'price_color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from '@/components/ColorPicker/index';
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeNames: ['1', '2']
    };
  },
  components: {
    ColorPicker
  },
  methods: {
    //选择图标
    chooseIcon(type) {
      this.type = type;
      this.$parent.showiconselcet();
    },

    geticon(data) {
      this.data[this.type].icon = data;
    },
    removeIcon(type) {
      this.data[type].icon = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 20px 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
</style>
